<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"> <input type="text" id="input">
        <div> TODO: <span id="text"></span> </div>
        <div id="btn">Add To Todo List</div>
        <ul id="list"></ul>
    </div> 
    
</body>
<script>
    const input = document.getElementById('input') 
    const text = document.getElementById('text') 
    const list = document.getElementById('list') 
    const btn = document.getElementById('btn') 
    let render 
        const inputObj = new Proxy({}, {
            get (target, key, receiver) { 
                return Reflect.get(target, key, receiver) 
            },
            set (target, key, value, receiver) {
                if (key === 'text') { 
                    input.value = value 
                    text.innerHTML = value 
                }
                return Reflect.set(target, key, value, receiver) 
            } 
        })
        class Render {
            constructor (arr) { 
                this.arr = arr 
            }
            init () { 
                const fragment = document.createDocumentFragment() 
                for (let i =0; i < this.arr.length; i++) { 
                    const li=document.createElement('li') 
                    li.textContent=this.arr[i] 
                    fragment.appendChild(li)
                }   
                list.appendChild(fragment) 
            }
            addList (val) { 
                const li=document.createElement('li') 
                li.textContent=val
                list.appendChild(li) 
            } 
        }
        const todoList=new Proxy([], { 
            get (target, key, receiver) { 
                return Reflect.get(target, key,receiver) 
            },
            set (target, key, value, receiver) { 
                if (key !=='length' ) { 
                    render.addList(value) 
                }
                return Reflect.set(target, key, value, receiver) 
            } 
        })
        window.onload=()=> { 
            render = new Render([]) 
            render.init()
        }
        input.addEventListener('keyup', e => { inputObj.text = e.target.value })
        btn.addEventListener('click', () => {
            todoList.push(inputObj.text) 
            inputObj.text = '' 
        })
</script>
</html>